<template>
	<navbar title="确认订单" :isBack="true"></navbar>
	<!-- <view class="" style="padding: 30rpx;">
			<view class="" style="width: 100%;height: 98rpx;background-color: white;border-radius: 10rpx;display: flex;justify-content: space-between;align-items: center;">
				<view class=""	>
					请选择收货地址
				</view>
				<view>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<view class="" style="margin-top: 20rpx;">
				
			</view>
		</view> -->
	<view style="padding-bottom: 180rpx;">
		<view class="card" @tap="selectAddr()" v-if="info.address.address">
			<view class="adderss_header">
				<!-- <image class="dingwei" :src="imageUrl+'black_dingwei.png'" mode="aspectFit"></image> -->
				<view class="grey" style="font-size: 28rpx;">
					{{info.address.province}}{{info.address.city}}{{info.address.area}}
				</view>
			</view>
			<view class="addrcenter">
				<view class="msg">{{info.address.address}}</view>
				<image src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/0fx/user/order/5.png" mode="widthFix"
					class="iconsr"></image>
			</view>
			<view class="grey" style="margin-top: 10rpx;display: flex;">
				<text>{{info.address.name}}</text>
				<text style="margin-left: 20rpx;">{{info.address.mobile}}</text>
			</view> 
		</view>
		<view class="card" v-else @tap="selectAddr()">
			<view class="addrcenter">
				<view class="addrcenter_add">

					<view class="msg" style="font-size: 28rpx;color: #000000;font-weight: 0;">请选择收货地址</view>
				</view>
				<image src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/0fx/user/order/5.png" mode="widthFix"
					class="iconsr"></image>
			</view>
		</view>
		<view class="card">
			<view class="titles" style="font-weight: bold;">商品信息</view>
			<view class="center" v-for="(item,index) in info.goods" style="margin: 0 -30rpx;">
				<view class="">
					<image mode="aspectFill" style="width: 140rpx;height: 140rpx;border-radius: 10rpx;" :src="item.goods_cover"></image>
				</view>
				<view class="shop_title">
					<view class="shop_title_top">
						<view class="shop_title_top_name shenglueh2 ellipsis-2">
							{{item.goods_name}}
						</view>
						<view class="shop_title_top_price" style="font-size: 32rpx;font-weight: bold;">
							<span style="font-size: 20rpx;margin-right: 5rpx;">￥</span>
							<span>{{item.goods_price}}</span>
						</view>
					</view>
					<view class="shop_title_bom"
						style="width: 100%;justify-content: space-between;align-items: center;display: flex;">
						<view class="">
							{{item.goods_specs}}
						</view><text>×{{item.goods_num}}</text>
					</view>
				</view>
			</view>
			<view class="priceinfo">
				<view class="form" style="padding: 0;">
					<view class="lable">商品总价</view>
					<view class="content" style="font-size: 32rpx;">¥{{info.total_price}}</view>
				</view>
				<view class="form" style="padding-top: 10rpx;">
					<view class="lable">运费</view>
					<view class="content" style="font-size: 32rpx;">¥{{freightPrice}}</view>
				</view>
				<!-- 优惠券暂时隐藏 -->
				<!-- <view class="form" @tap="coupon_model = true">
						<view class="lable">优惠券</view>
						<view class="content colors">-¥{{couponPrice}}</view>
						<image src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/0fx/user/order/5.png" mode="widthFix"
							class="iconsrs"></image>
					</view> -->
			</view>
		</view>
		<view class="input_message">
			<view class="input_message_title" style="font-weight: bold;font-size: 32rpx;">
				买家留言
			</view>
			<textarea style="height: 140rpx;margin-top: 20rpx;font-size: 28rpx;" v-model="param.memo"
				placeholder="可输入要给卖家看到的信息，选填" />
		</view>
		<view class="ofooters">
			<view class="item">
				<text>合计：</text>
				<view class="" style="font-weight: bold;margin-bottom: 5rpx;">
					<span style="font-size: 24rpx;">￥</span>
					<span style="font-size: 40rpx;">{{info.total_price}}</span>
				</view>
			</view>
			<view class="" @tap="pay"
				style="width: 452rpx;height: 98rpx;display: flex;justify-content: center;align-items: center;color: white;background: linear-gradient( 90deg, #5062A7 0%, #354678 100%);font-size: 32rpx;">
				立即支付
			</view>
		</view>

	</view>

</template>

<script setup lang="ts">
	import { onLoad, onShow } from '@dcloudio/uni-app'
	import { ref, reactive,nextTick } from 'vue'
	import { shopTrueOrder, shopAddOrder, shopGetFreight } from '@/service/api/shop'
	import tools from '@/utils/tools'
	const address = reactive({
		address: "",
		province: "",
		city: "",
		area: "",
		name: "",
		mobile: ""
	})
	const param = reactive({
		cart_ids: [],
		goods_id: '',
		num: '',
		specs: "",
		memo: "",
		address_id: ""
	})
	const list = ref([])
	const freightPrice = ref(0)//运费
	const textareaMessage = ref('')
	const coupon_model = ref(false)
	const info = reactive({
		goods: [
			{
				goods_name: "",
				goods_price: "",
				goods_specs: "",
				goods_num: "",

			}
		],
		total_price: "",
		address: {
			address:""
		}
	}) as any
	onLoad((opt) => {
		uni.removeStorage({
			key: 'item'
		})
		if (opt.cart_ids) {
			param.cart_ids = JSON.parse(opt.cart_ids);
		}
		if (opt.goods_id) {
			param.goods_id = opt.goods_id;
			param.num = opt.num;
			param.specs = opt.specs
		}
		getData()
	})
	onShow(() => {
		if (uni.getStorageSync('item')) {
			info.address = JSON.parse(uni.getStorageSync('item'))
			param.address_id = info.address.id;
			getFreight()
		}


		console.log(uni.getStorageSync('item'));
			
		 
		
	})
	const getData = async () => {
		const res = await shopTrueOrder(param)
		for (let i in info) {
				
			if(res.msg[i]){
				info[i] = res.msg[i]
			}
			
		}
		param.address_id = info.address.id;
		if(info.address.province){
			getFreight()
		}
		
		console.log(info);
	}
	//获取运费
	const getFreight = async () => {
		 
	  const res = await shopGetFreight({ province: info.address.province })
	  if(res.code == 1){
		  freightPrice.value = res.msg
	  }else{
		  tools.showToast(res.msg)
	  }
	   
	 
	}
	//选择收货地址
	const selectAddr = () => {
		tools.navTo('/pagesB/order/address?id=' + param.address_id + '&specs=' + param.specs);
	}
	//添加订单
	const pay = async () => {
		const res = await shopAddOrder(param)
		if (res.code == 1 && res.msg.pay_price > 0) {
			let id = res.msg.id;
			tools.navTo('/pagesB/order/pay?id=' + id + '&type=3', 4)
			if(res.msg.pay_price <= 0){
				setTimeout(()=>{
					tools.navTo('/pagesB/order/myOrder')
				},500)
			}
		} 
		tools.showToast(res.msg)
		console.log(res);
		// 
	}
</script>

<style scoped lang="scss">
	.ellipsis-2 {
		// 注意，不要设置此标签的高度，下方代码设置了行数，会自动根据行数进行计算高度的。

		//文本超出部分以...形式展示
		text-overflow: -o-ellipsis-lastline;
		//整体超出部分隐藏
		overflow: hidden;
		//文本超出部分以...形式展示，同第一行样式代码
		text-overflow: ellipsis;
		//display 块级元素展示
		display: -webkit-box;
		//设置文本行数为2行
		-webkit-line-clamp: 2;
		//设置文本行数为2行
		line-clamp: 2;
		//从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
		-webkit-box-orient: vertical;

	}

	@import '../../static/css/detail.scss';
	@import '../../static/css/order.scss';
</style>
<style>
	page {
		background-color: #F8F8F9;
	}
</style>